<template>
  <div class="classroom">
    <el-tabs v-model="activeName" type="card" @tab-click="getList">
      <el-tab-pane label="各单位类别统计分析" name="0">
        <!-- <span slot="label"> 统计表<el-badge class="mark" :value="12" /></span> -->

        <el-row type="flex" :gutter="20" align="end">
          <rz-height></rz-height>

          <el-col :span="2">
            <el-button
              @click="
                query.pageIndex = 1;
                exportList();
              "
              >导出</el-button
            ></el-col
          >
        </el-row>
        <rz-height></rz-height>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="districtName"
            label="区域"
            width="80"
          ></el-table-column>

          <el-table-column label="集体用餐配送单位">
            <el-table-column prop="collectiveRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="collectiveBackground" label="本底数">
            </el-table-column>
          </el-table-column>
          <el-table-column label="特大型社会餐饮">
            <el-table-column prop="largeScaleRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="largeScaleBackground" label="本底数">
            </el-table-column>
          </el-table-column>
          <el-table-column label="特殊学校食堂">
            <el-table-column prop="specialRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="specialBackground" label="本底数">
            </el-table-column>
          </el-table-column>
          <el-table-column label="学校食堂">
            <el-table-column prop="schoolRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="schoolBackground" label="本底数">
            </el-table-column>
          </el-table-column>
          <el-table-column label="养老机构食堂">
            <el-table-column prop="oldAgeRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="oldAgeBackground" label="本底数">
            </el-table-column>
          </el-table-column>

          <el-table-column label="中央厨房">
            <el-table-column prop="kitchenRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="kitchenBackground" label="本底数">
            </el-table-column>
          </el-table-column>

          <el-table-column label="食品安全工作站">
            <el-table-column prop="workstationRegister" label="已注册数">
            </el-table-column>
            <el-table-column prop="workstationBackground" label="本底数">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="单位注册分析" name="1">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="6">
            <el-select
              v-model="query.areaCode"
              placeholder="请选择单位所属区域"
            >
              <el-option
                v-for="item in regionList"
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              >
              </el-option> </el-select
          ></el-col>
          <el-col :span="6">
            <el-select
              v-model="query.typeA"
              placeholder="请选择单位类别"
              clearable
            >
              <el-option
                v-for="(item, index) in [
                  '特大型餐饮单位',
                  '中央厨房',
                  '养老机构食堂',
                  '集体用餐配送单位',
                  '学校食堂',
                  '特殊学校食堂',
                  '食品安全工作站',
                ]"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input
              maxlength="50"
              clearable
              v-model="query.searchOne"
              placeholder="请输入统一信用代码/许可证号"
            ></el-input>
          </el-col>
          <el-col :span="8">
            <el-input
              maxlength="50"
              clearable
              v-model="query.unitName"
              placeholder="请输入单位名称"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="query.registrationStatus"
              clearable
              placeholder="状态"
            >
              <el-option
                v-for="(item, index) in [
                  { label: '已注册', value: '1' },
                  { label: '未注册', value: '2' },
                ]"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="2">
            <el-button
              type="primary"
              @click="
                query.pageIndex = 1;
                getList();
              "
              >查询</el-button
            ></el-col
          >
          <el-col :span="2">
            <el-button
              @click="
                query.pageIndex = 1;
                exportList();
              "
              >导出</el-button
            ></el-col
          >
        </el-row>
        <rz-height></rz-height>

        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="districtName"
            label="区域街道"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="operatorName"
            label="单位名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="typeA"
            label="单位类别"
            width="150"
          ></el-table-column>
          <el-table-column prop="operatorPlace" label="单位地址" width="300">
          </el-table-column>
          <el-table-column
            prop="newLicenseNo"
            label="许可证号"
            width="200"
          ></el-table-column>

          <el-table-column
            prop="contactor"
            label="联系人"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="indexScore"
            label="食安指数"
            width="120"
            sortable="custom"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.indexScore > 80" class="green">
                {{ scope.row.indexScore }}
              </div>
              <div v-else-if="scope.row.indexScore > 60" class="yellow">
                {{ scope.row.indexScore }}
              </div>
              <div v-else class="red">{{ scope.row.indexScore }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="establishDateStr" label="注册日期" width="120">
            <template slot-scope="scope">
              <div>{{ scope.row.establishDateStr || "未注册" }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="identify"
            label="统一社会信用代码"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="unitName"
            label="营业执照名称"
            width="180"
          ></el-table-column>

          <el-table-column prop="" label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="edit(scope.row)"
                >移除</el-button
              >

              <el-button
                type="primary"
                v-if="scope.row.typeA == '食品安全工作站' && scope.row.id"
                size="mini"
                @click="workstation(scope.row)"
                >查看工作站</el-button
              >
              <el-button
                type="primary"
                v-else-if="
                  scope.row.typeA != '食品安全工作站' &&
                  scope.row.establishDateStr
                "
                size="mini"
                @click="view(scope.row)"
                >企业状况图</el-button
              >

              <!-- typeA -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="query.pageIndex"
          @pagination="getList"
          v-show="total"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import vueQr from "vue-qr";
import {
  findSuperviseAndBackgroundList,
  findSuperviseAndBackground,
  exportSuperviseAndBackgroundList,
  exportFindSuperviseAndBackground,
} from "@/api/modules/chain";
import { saveSuperViseUnitLabel } from "@/api/modules/enterprise";
export default {
  components: {
    vueQr,
  },
  props: {},
  data() {
    return {
      query: {
        areaCode: "320500000000",
        pageIndex: 1,
        pageSize: 10,
        registrationStatus: "",
        search: "",
        searchOne: "",
        sort: "",
        typeA: "",
        typeName: "",
        unitName: "",
      },
      bodyIndustryStr: [],
      total: 0,
      list: [],
      tableData: [],
      regionList: [],
      dialogVisible: false,
      activeName: "0",
    };
  },
  computed: {},
  created() {
    if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320500000000";
    }
    this.getList();
    this.findListByParentCode();
  },
  mounted() {},
  methods: {
    addItem() {
      this.$router.push("/foodSafety/policy/addPolicy");
    },
    getList() {
      if (this.activeName == "0") {
        findSuperviseAndBackground(this.query).then((res) => {
          this.tableData = res.data;
          this.total = res.totalCount;
        });
      } else {
        findSuperviseAndBackgroundList(this.query).then((res) => {
          this.tableData = res.data.list;
          this.total = res.totalCount;
        });
      }
    },
    exportList() {
      if (this.activeName == "0") {
        exportFindSuperviseAndBackground(this.query).then((res) => {
          var blob = new Blob([res], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download =
            "统计表导出" + new Date().getTime() + ".xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        });
      } else {
        exportSuperviseAndBackgroundList(this.query).then((res) => {
          var blob = new Blob([res], {
            type: "application/vnd.ms-excel;charset=utf-8",
          });
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download =
            "单位明细导出" + new Date().getTime() + ".xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        });
      }
    },
    view(e) {
      // sessionStorage.setItem("router", "/keyUnit");
      //      sessionStorage.setItem("interpretation", e.id);
      // sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      // this.$router.push({
      //   path: "/interpretation/home?code=4",
      //   // query: { id: e.id },
      // });

             sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      sessionStorage.setItem("interpretation", e.id);
   this.$router.push({
        path: "/interpretation/home?url=/keyUnit",
      });
    },
    workstation(e) {
      sessionStorage.setItem("workId", e.id);
      this.$router.push(`/workstation?url=/keyUnit`);
    },
    pagination(e) {
      console.log(e);
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .deleteByIdPolicy({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
              this.pageIndex = 1;
              this.findFoodSafetyClassList();
              this.$success(res.msg);
            })
            .catch((res) => {
              console.log(res);
            });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    onView(e) {
      this.url = e.id;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    findListByParentCode() {
      this.$http
        .findListByParentCode({
          parentCode: this.query.areaCode,
        })
        .then((res) => {
          this.regionList = res.data;
        });
    },
    sortChange(e) {
      if (e.order == "ascending") {
        this.query.sort = "1";
      } else if (e.order == "descending") {
        this.query.sort = "2";
      } else {
        this.query.sort = "";
      }
      this.getList();
    },
    edit(e) {
      this.$confirm("确认移除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        saveSuperViseUnitLabel([
          {
            labelName: "",
            type: "重点单位",
            id: e.id,
            unitName: e.unitName,
            updateName: sessionStorage.getItem("logname"),
            updateDepartment: sessionStorage.getItem("unitName"),
            newLicenseNo: e.newLicenseNo,
            typeA: "",
            typeAStr: 0,
            regionType: "",
          },
        ]).then((res) => {
          this.getList();
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>


